<style lang="less">
</style>
<template>
    <div style="display: flex; position: relative">
        <Form
                ref="smsForm"
                :model="sms"
                :label-width="110"
                label-position="left"
                :rules="smsValidate">
            <FormItem label="服务提供商" prop="serviceName">
                <Select
                        v-model="sms.serviceName"
                        @on-change="changeSms"
                        placeholder="请选择"
                        style="width: 230px">
                    <Option value="ALI_SMS">阿里云</Option>
                    <Option value="TENCENT_SMS">腾讯云</Option>
                </Select>
            </FormItem>
            <FormItem label="accessKey" prop="accessKey">
                <Input
                        type="text"
                        v-model="sms.accessKey"
                        placeholder="请输入accessKey/secretId"
                        :disabled="changeLoading"
                        style="width: 380px"/>
            </FormItem>
            <FormItem label="secretKey" prop="secretKey">
                <Tooltip placement="right" content="无法编辑时请先点击查看图标">
                    <Input
                            class="input-see"
                            type="text"
                            v-model="sms.secretKey"
                            :readonly="!changedSmsSK"
                            @on-click="seeSecret(sms.serviceName)"
                            :disabled="changeLoading"
                            icon="ios-eye"
                            placeholder="请输入secretKey"
                            style="width: 380px"/>
                </Tooltip>
            </FormItem>
            <FormItem
                    v-if="sms.serviceName == 'TENCENT_SMS'"
                    label="应用ID"
                    prop="appId">
                <Input
                        type="text"
                        v-model="sms.appId"
                        :disabled="changeLoading"
                        placeholder="请输入应用ID（短信控制台-应用管理）"
                        style="width: 380px"/>
            </FormItem>
            <FormItem label="短信签名" prop="signName">
                <Input
                        type="text"
                        v-model="sms.signName"
                        :disabled="changeLoading"
                        placeholder="请输入短信签名，例如XBoot"
                        style="width: 380px"/>
            </FormItem>
            <FormItem label="使用场景" prop="type">
                <Select
                        v-model="sms.type"
                        @on-change="changeSmsType"
                        :disabled="changeLoading"
                        placeholder="请选择"
                        style="width: 380px"
                        transfer>
                    <Option value="0">通用验证码</Option>
                    <Option value="1">注册</Option>
                    <Option value="2">登录</Option>
                    <Option value="3">修改绑定手机号</Option>
                    <Option value="4">修改密码</Option>
                    <Option value="5">重置密码</Option>
                    <Option value="6">工作流消息</Option>
                </Select>
            </FormItem>
            <FormItem label="模版CODE/ID" prop="templateCode">
                <Input
                        type="text"
                        v-model="sms.templateCode"
                        :disabled="changeLoading"
                        placeholder="请输入场景对应短信模版CODE/ID，如SMS_123456789"
                        style="width: 380px"/>
            </FormItem>
            <FormItem>
                <Button
                        type="primary"
                        style="width: 100px"
                        :disabled="changeLoading"
                        :loading="saveLoading"
                        @click="saveEditSms">保存更改
                </Button>
            </FormItem>
        </Form>
        <Spin fix v-if="loading"></Spin>
    </div>
</template>

<script>
  import {checkSmsSet, editSmsSet, getSmsSet, getSmsTemplateCode, seeSecretSet,} from "@/api/index";

  export default {
        name: "sms",
        data() {
            return {
                loading: false, // 表单加载状态
                changeLoading: false,
                saveLoading: false,
                sms: {
                    serviceName: "ALI_SMS",
                    accessKey: "",
                    secretKey: "",
                    appId: "",
                    signName: "",
                    type: "",
                    templateCode: "",
                },
                changedSmsSK: false, // 是否修改短信的secrectKey
                smsValidate: {
                    // 表单验证规则
                    serviceName: [{required: true, message: "请选择", trigger: "change"}],
                    accessKey: [{required: true, message: "不能为空", trigger: "change"}],
                    secretKey: [{required: true, message: "不能为空", trigger: "change"}],
                    appId: [{required: true, message: "不能为空", trigger: "change"}],
                    signName: [{required: true, message: "不能为空", trigger: "change"}],
                    type: [{required: true, message: "不能为空", trigger: "change"}],
                    templateCode: [
                        {required: true, message: "不能为空", trigger: "blur"},
                    ],
                },
            };
        },
        methods: {
            init() {
                this.initSmsSet();
            },
            initSmsSet() {
                this.loading = true;
                checkSmsSet().then((res) => {
                    if (res.status==200 && res.result) {
                        let sms = res.result;
                        getSmsSet(sms).then((res) => {
                            this.loading = false;
                            if (res.result) {
                                // 转换null为""
                                for (let attr in res.result) {
                                    if (res.result[attr] == null) {
                                        res.result[attr] = "";
                                    }
                                }
                                this.sms = res.result;
                                this.sms.type = "0";
                                this.changeSmsType(this.sms.type);
                            } else {
                                this.changedSmsSK = true;
                            }
                        });
                    } else {
                        this.loading = false;
                        this.changedSmsSK = true;
                    }
                });
            },
            changeSms(v) {
                this.changeLoading = true;
                getSmsSet(v).then((res) => {
                    this.changeLoading = false;
                    if (res.result) {
                        // 转换null为""
                        for (let attr in res.result) {
                            if (res.result[attr] == null) {
                                res.result[attr] = "";
                            }
                        }
                        this.sms = res.result;
                        this.changedSmsSK = false;
                        this.sms.type = "0";
                        this.changeSmsType(this.sms.type);
                    } else {
                        this.sms = {serviceName: v};
                        this.sms.type = "0";
                        this.changedSmsSK = true;
                    }
                });
            },
            seeSecret(name) {
                if (!name) {
                    return;
                }
                seeSecretSet(name).then((res) => {
                    if (res.status==200) {
                        this.sms.secretKey = res.result;
                        this.changedSmsSK = true;
                    }
                });
            },
            changeSmsType(v) {
                getSmsTemplateCode(this.sms.serviceName, v).then((res) => {
                    if (res.status==200) {
                        this.sms.templateCode = res.result;
                    }
                });
            },
            saveEditSms() {
                this.$refs.smsForm.validate((valid) => {
                    if (valid) {
                        this.saveLoading = true;
                        this.sms.changed = this.changedSmsSK;
                        editSmsSet(this.sms).then((res) => {
                            this.saveLoading = false;
                            if (res.status==200) {
                                this.$Message.success("保存成功");
                            }
                        });
                    }
                });
            },
        },
        mounted() {
            this.init();
        },
    };
</script>